<template>
  <div class="radio">
    <div class="title">
      <p>{{ category }}</p>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="热门" name="first">
        <div class="li" v-for="(item, index) in datalist" :key="index" @click="toDjDetail(item.id)">
          <div class="img">
            <img :src="item.picUrl" />
          </div>
          <div class="right">
            <span class="name">{{ item.name }}</span>
            <span class="rcmdtext">{{ item.rcmdtext }}</span>
            <div class="num">
              <span class="programCount">节目：{{ item.programCount }}</span>
              <span class="subCount">订阅：{{ item.subCount >10000 ? (item.subCount / 10000).toFixed(0) + '万' : item.subCount }}</span>
            </div>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getHotDj } from '../../../network/dj.js'
export default {
  data () {
    return {
      type: 0,
      category: '',
      datalist: [],
      activeName: 'first'
    }
  },
  methods: {
    handleClick (tab, event) {},
    toDjDetail (id) {
      this.$router.push('/program_detail/' + id)
    },
    getHotDj (type) {
      getHotDj(type).then(res => {
        // console.log(res.data)
        this.category = res.data.djRadios[0].category
        this.datalist = res.data.djRadios
      // console.log(this.datalist)
      })
    }
  },
  created () {
    this.type = parseInt(this.$route.params.type)
    this.getHotDj(this.type)
  }
}
</script>

<style lang="less" scoped>
  .radio {
    width: 82%;
    overflow: auto;
    .title {
      width: 95%;
      margin: 20px auto;
      p {
        font-size: 25px;
      }
    }
    .el-tabs {
      width: 95%;
      margin: 0 auto;
      .el-tab-pane {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: space-between;
        .li {
          width: 48%;
          padding: 10px 0;
          border-bottom: 1px solid #efefef;
          display: flex;
          justify-content: flex-start;
          .img {
            width: 30%;
            img {
              width: 100%;
            }
          }
          .right {
            padding: 10px 0 10px 15px;
            display: flex;
            flex-direction: column;
            .name {
              font-size: 18px;
            }
            .rcmdtext, .num {
              font-size: 15px;
              color: #999999;
            }
            .rcmdtext {
              padding: 10px 0;
            }
          }
        }
      }
    }
  }
</style>
